<template>
  <view class="download-page">
    <view class="download-head">
      <view class="head-img">
        <image :src="expertList.avatar" mode=""></image>
      </view>
      <view class="head-content">
        <view class="content-name">{{expertList.nickname}}</view>
        <view class="content-label">邀请您下载专属天天鉴APP</view>
      </view>
    </view>
    <view class="download-nav">
      <view class="nav-title">注册/下载天天鉴</view>
      <view class="nav-int">
        <up-input placeholder="请输入手机号码" type="number" fontSize="28rpx" color="#333" maxlength="11" border="none"
          v-model="phoneValue" @update:modelValue="onloginShow"></up-input>
      </view>
      <view class="nav-int">
        <up-input placeholder="请输入短信验证码" type="number" maxlength="6" fontSize="28rpx" color="#333" border="none"
          v-model="codeValue" @update:modelValue="onloginShow">
          <template #suffix>
            <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
            <view class="int-cord" @click="getCode">{{tips}}</view>
          </template>
        </up-input>
      </view>
      <view class="nav-btn">
        <up-button text="注册下载" shape="circle" :disabled="loginShow" color="#A4682F" @click="onlogin"></up-button>
      </view>
      <view class="login-agreement">
        <up-checkbox :customStyle="{marginBottom: '8px'}" shape="circle" activeColor="#A4682F" name="agree" usedAlone
          v-model:checked="aloneChecked">
          <template #label>
            <view class="agreement-title">
              我已阅读并同意
              <view class="agreement-label" @click.stop="agreement('user')">《用户协议》</view>和
              <view class="agreement-label" @click.stop="agreement('privacy')">《隐私政策》</view>
            </view>
          </template>
        </up-checkbox>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    mobilelogin,
    send,
    infotoid
  } from "./api.js"
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const phoneValue = ref("")
  const codeValue = ref("")
  const tips = ref('');
  const value = ref('');
  const uCodeRef = ref(null);
  const loginShow = ref(true)
  const aloneChecked = ref(true)
  const userId = ref('')
  const expertList = ref({})
  onLoad((e) => {
    if (e && e.top_user_id) {
      userId.value = e.top_user_id
      infotoidApi()
    }
  })
  const codeChange = (text) => {
    tips.value = text;
  };

  async function onlogin() {
    if (!aloneChecked.value) {
      uni.showToast({
        title: '请阅读并同意《用户协议》和《隐私政策》',
        icon: 'none'
      })
      return
    }
    const res = await mobilelogin({
      mobile: phoneValue.value,
      captcha: codeValue.value,
      top_user_id: userId.value
    })
    if (res && res.code === 1) {
      uni.showToast({
        title: '注册成功',
        icon: 'none'
      })
      uni.navigateTo({
        url: '/pages/my/invitePage/InviteDownload'
      })
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  }

  function agreement(val) {
    if (val === 'user') {
      uni.navigateTo({
        url: '/pages/my/agreementPage/agreementUser'
      })
    } else if (val === 'privacy') {
      uni.navigateTo({
        url: '/pages/my/agreementPage/agreementPrivacy'
      })
    }
  }

  function onloginShow(val) {
    loginShow.value = phoneValue.value && codeValue.value ? false : true
  }
  const getCode = async () => {
    if (uCodeRef.value.canGetCode) {
      // 模拟向后端请求验证码
      if (!phoneValue.value) {
        uni.showToast({
          title: '请填写手机号',
          icon: "none"
        })
        return
      }
      if (!aloneChecked.value) {
        uni.showToast({
          title: '请阅读并同意《用户协议》和《隐私政策》',
          icon: 'none'
        })
        return
      }
      const res = await send({
        mobile: phoneValue.value,
        event: 'mobilelogin'
      })
      uni.showLoading({
        title: '正在获取验证码'
      })
      if (res && res.code === 1) {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        uni.$u.toast('验证码已发送');
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      } else {
        uni.$u.toast(`${res.msg}`);
      }
    } else {
      uni.$u.toast('倒计时结束后再发送');
    }
  }
  const infotoidApi = (async () => {
    const res = await infotoid({
      user_id: userId.value
    })
    if (res && res.code == 1) {
      expertList.value = res.data
    }
  })
</script>

<style lang="scss" scoped>
  .download-page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('@/static/my/image/inviteBackground.png');
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 48rpx 30rpx;

    .download-head {
      display: flex;
      margin-left: 18rpx;

      .head-img {
        height: 120rpx;
        width: 120rpx;
        border-radius: 50%;

        image {
          height: 120rpx;
          width: 120rpx;
          border-radius: 50%;
        }
      }

      .head-content {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;

        .content-name {
          font-size: 40rpx;
          font-weight: 500;
          color: #fff;

        }

        .content-label {
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
          margin-top: 8rpx;
        }
      }
    }

    .download-nav {
      width: 100%;
      height: 590rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin-top: 48rpx;
      box-sizing: border-box;
      padding: 40rpx 30rpx;
      display: flex;
      flex-direction: column;

      .nav-title {
        font-size: 34rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);

      }

      .nav-int {
        width: 100%;
        height: 88rpx;
        border-radius: 420rpx;
        background: #F2F2F2;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 32rpx;
        margin-top: 40rpx;

        .int-cord {
          font-size: 28rpx;
          font-weight: 400;
          color: #A4682F;

        }
      }

      .nav-int:last-child {
        margin-top: 32rpx;
      }

      .nav-btn {
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        margin-top: 56rpx;
      }

      .login-agreement {
        width: 100%;
        height: 36.51rpx;
        margin-top: 32rpx;
        text-align: center;
        font-size: 22rpx;
        font-weight: 400;
        letter-spacing: 0rpx;
        line-height: 31.86rpx;
        color: rgba(153, 153, 153, 1);
        display: flex;
        align-items: center;
        justify-content: center;

        .agreement-title {
          display: flex;
          align-items: center;
        }

        .agreement-label {
          color: $color;
        }
      }
    }
  }
</style>